iT邦幫忙

2023 iThome 鐵人賽

DAY 22
0

Vue元件:
VUE 的元件是什麼?簡單來說,元件就像是獨立的小工具,可以幫我們把畫面拆分成一塊一塊的,讓程式碼看起來更簡潔,也更容易維護。
這樣一來,不僅可以提升開發效率,也能使我們的程式碼更容易重複使用。

一開始,會將元件的邏輯寫在一個獨立的 JavaScript 檔案中。這樣做的好處是,我們可以把邏輯和畫面分開,讓程式碼更有組織性。假設我們要做一個計數器的元件,我們可以在 JavaScript 檔案中寫下計數的邏輯,而不用混在 HTML 中,讓程式碼更清晰易讀。

在 HTML 檔案,我們會寫下元件的外貌,也就是它在網頁上的長相。
可以使用 Vue 的模板語法,像是 {{ }} 或者 v-bind 等等來綁定在 JavaScript 中定義的資料,這樣當資料變動時,畫面也會跟著更新。
最後要將寫好的元件引入到主檔案中,這樣才能在整個應用程式中使用。
總結來說,使用 VUE 的元件開發可以讓程式碼更有組織性,也更容易維護。
透過將邏輯和畫面分開寫,讓程式碼更清晰易讀。

元件註冊component:
在 Vue 中創建一個元件,可以使用 Vue.component 方法,並指定組件名稱和元件的配置:

Vue.component('my-component', {
  // 組件的配置選項
});

範例:
Js:

Vue.component('counter-component', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <div>
      <button @click="count++">完成任務</button>
      <p>已完成 {{ count }} 項任務</p>
    </div>
  `
});


new Vue({
  el: '#app'
});

在這段程式碼中,定義了一個名為 counter-component 的 Vue 元件,並在 data 中設置了一個 count 變數,
預設值為 0。接著在 template 中寫下了一個按鈕,當按下時,會使 count 增加,同時顯示已完成的任務數量。

app.html:

<!-- app.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>待辦事項清單</title>
</head>
<body>

  <div id="app">
    <counter-component></counter-component>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="CounterComponent.js"></script>
  
</body>
</html>

在這段程式碼中,引入了 Vue 的 CDN,以及剛剛建立的 CounterComponent.js 檔案。
接著在 #app 中使用了<counter-component></counter-component>來引入了我們的計數器元件。

最後打開瀏覽器,用瀏覽器開啟 app.html,就會看到一個簡單的待辦事項清單,包含了一個可以計數的元件了!
https://ithelp.ithome.com.tw/upload/images/20231007/20163036wxEG80S4MA.png


上一篇
Day21 監聽match
下一篇
Day23 vue 單一檔案元件
系列文
學習網頁前端基本的技術,包含如何使用HTML標籤跟CSS做出基本的網頁版型,了解bootstrap template如何建置網頁架構。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言